<template>
    <div class="rightTool">
        <div class="toolBar">
            <!--下方工具条-->
            <div class="defaultTool">
                <div class="iconfont yx" @click="getYX" title="影像"></div>
                <div class="iconfont sl" @click="getSL" title="矢量"></div>
                <!-- <div class="iconfont" @click="threeTwo" title="二维">&#xe606;</div>
                <div class="iconfont" @click="twoThree" title="三维">&#xe604;</div> -->
                <div class="iconfont" @click="zoomIn" title="放大">&#xe614;</div>
                <div class="iconfont" @click="zoomOut" title="缩小">&#xe664;</div>
                <div class="iconfont" @click="onCenter(120.42918,29.498628,800000.0)" title="复位">&#xe65b;</div>
                <!-- <div class="iconfont" @click="qiehuan" v-html="tubiao"></div> -->
                <!-- <div class="iconfont" >&#xe75a;</div>
                <div class="iconfont" >&#xe82e;</div> -->
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        name: '',
        data(){
            return{
                isThree: 1,
                tubiao:"&#xe606",
                qiehuan2D:"&#xe604",
                qiehuan3D:"&#xe606",
                sanwei: true,
                isIndex: 0,
                chartsShow: false,
                toolList: [{name:'站点', iconCode: '&#xe6fe;',zhan:true},
                        {name:'日报', iconCode: '&#xe611;',zhan:true},
                        {name:'周报', iconCode: '&#xe66d;',zhan:true},
                        {name:'月报', iconCode: '&#xe629;',zhan:true},
                        {name:'年报', iconCode: '&#xe610;',zhan:true}]
            }
        },
        mounted(){
             if(this.$store.state.forq==1){
                 this.toolList[0].zhan=false
             }
        },
        methods: {
            qiehuan: function(){
                if(this.isThree==1){
                    this.tubiao = this.qiehuan2D
                    this.threeTwo()
                    this.isThree = 0
                    this.$comjs.onCenter(120.155161,30.236581,80000.0)
                }else{
                    this.tubiao = this.qiehuan3D
                    this.twoThree()
                    this.isThree = 1
                    this.$comjs.onCenter(120.155161,30.236581,80000.0)
                }
            },
            handleBtnActive: function(index){
                //this.isActive = !this.isActive
                this.isIndex = index
                // var mycanvas = $("#quxianCharts").find("canvas")[0];
 
                // var image = mycanvas.toDataURL("image/jpeg");
            
                // var $a = document.createElement('a');
                // $a.setAttribute("href", image);
                // $a.setAttribute("download", "");
                // $a.click();
                // var html = `<div> <img src="${image}"/> </div>` ;
                // $('#quxianCharts').append(html);
                // 输出为word.
                // $("#quxianCharts").wordExport();
                if(this.isIndex  == 0){
                    this.chartsShow = !this.chartsShow;
                }
                else{
                    this.chartsShow = false;
                }
                if(this.isIndex==1){
                    // this.getWord();
                    this.getReportDay()
                }else if(this.isIndex==2){
                    // this.getWord();
                    this.getReportWeek()
                }else if(this.isIndex==3){
                    // this.getWord();
                    this.getReportMonth()
                }else if(this.isIndex==4){
                    // this.getWord();
                    this.getReportYear()
                }
            },
            //地图缩放
            zoomIn: function(){
                this.$comjs.zoomIn();
                
            },
            zoomOut: function(){
                this.$comjs.zoomOut();
            },
            //定位，视角
            onCenter: function(){
                this.$comjs.onCenter(120.42918,29.498628,800000.0);
            },
            //量测
            drawPolyline: function(){
                this.$comjs.drawPolyline();
            },
            measureArea: function(){
                this.$comjs.measureArea();
            },
            //清除
            clearMeasure: function(){
                this.$comjs.clearMeasure();
            },
            //增加marker
            addMarkers: function(){
                this.$comjs.addMarkers();
            },
            addPloy: function(){
                this.$comjs.addPloy();
            },
            //测试23D切换
            threeTwo: function(){
                this.$comjs.threeTwo();
            },
            twoThree: function(){
                this.$comjs.twoThree();
            },
            rotate: function(){
                this.$comjs.rotate();
            },
            getYX(){
                this.$comjs.getYX();
                localStorage.setItem('isThree',"sanwei")
            },
            getSL(){
                this.$comjs.getSL();
                localStorage.setItem('isThree',"erwei")
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .rightTool
        width:.46rem
        height: 87.8vh
        position: absolute
        z-index:1
        top: 6.57vh
        right:0
        background: rgba(7,23,42,0.49)
        font-size: .12rem
        cursor:pointer
        .toolBar
            .toolBtn
                width:100%
                font-size:.12rem
                dl.active
                    color: #4A4A4A
                    background: #16D0FF
                dl
                    width:100%
                    height : .6rem
                    background : #3A536E
                    padding-top: .1rem
                    margin-bottom : .01rem 
                    color: #fff
                    dt
                        width: 0.24rem
                        height: 0.24rem
                        line-height :0.24rem
                        font-size: .24rem
                        margin: 0 auto
                        margin-bottom: .07rem 
                        text-align : center
                    dd
                        width: 100%
                        text-align : center
                        margin-bottom:.07rem
        .defaultTool
            position: absolute
            bottom: 0
            color: #fff
            div
                width: .45rem
                height: .45rem
                line-height : .45rem
                text-align : center
                background : #3A536E
                margin-bottom : .01rem
            .yx
                background :url('/yq/yx.png') no-repeat center
                background-size: 75%
                background-color : #3A536E
            .sl
                background :url('/yq/sl.png')  no-repeat center
                background-size: 75%
                background-color : #3A536E
</style>



